<template>
  <div class="container">
    <van-nav-bar title="发现" />
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="group">
    <van-cell-group>
        <van-cell 
        clickable 
        :value="item.createDate" 
        v-for="item in list" 
        :key="item.id" 
        :to="`/product/chat?receiveid=${item.counterpart.id}`"
        >
          <template #icon>
            <van-image
              round
              width="50"
              height="50"
              :src="item.counterpart.avatar_text"
            />
          </template>
          <template #title>
            <span>{{item.counterpart.nickname}}</span>
          </template>
          <template #label>
            <span class="content">{{item.content}}</span>
          </template>
        </van-cell>
    </van-cell-group>
    </van-pull-refresh>
  </div>

  <Tabbar />
</template>

<script setup>
  const {proxy} = getCurrentInstance()
  onMounted(()=>{
    getList()
  })
  const list = ref([])
  const getList = async()=>{
    let result = await proxy.$GET({
      url:'/chat/share'
    })
    if(result){
      list.value = result
      refreshing.value = false
    }
  }
  const refreshing = ref(false)
  const onRefresh = ()=>{
    getList()
  }
</script>

<style>
  .content{
    display: inline-block;
    white-space: nowrap; 
    width: 50%;
    overflow: hidden;
    text-overflow:ellipsis;
  }
  .van-cell__title{
    width: 50%;
  }
  .container{
    height: 94%;
  }
  .group{
    height: 90%;
  }
</style>